<template>
  <div class="bumen">
    <div class="bumen-hearder clear">
      <div class="bumen-left">
        <i class="el-icon-s-operation"></i>
        <span>数据列表</span>
      </div>
      <div class="bumen-right">
        <el-form>
          <el-button @click="dialogFormVisibleAdd = true">添加</el-button>
          <el-select v-model="count" placeholder="请选择显示条数" disabled>
            <el-option value="5"></el-option>
            <el-option value="10"></el-option>
          </el-select>
          <el-select v-model="fangshi" placeholder="请选择排列方式" disabled>
            <el-option value="居中对齐"></el-option>
            <el-option value="左对齐"></el-option>
            <el-option value="右对齐"></el-option>
          </el-select>
        </el-form>
      </div>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="部门名称" width="180">
      </el-table-column>
      <el-table-column prop="description" label="职能描述"> </el-table-column>
      <el-table-column prop="employees" label="员工数量" width="180">
      </el-table-column>
      <el-table-column prop="createTime" label="添加时间" width="180">
      </el-table-column>
      <el-table-column label="是否启用" width="180">
        <template slot-scope="scope">
          <el-switch
            @change="Switch(scope.row)"
            v-model="scope.row.isUsed"
            active-color="#13ce66"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <a @click="edit(scope.row)">编辑</a>
          <a @click="bumenDelete(scope.row.id)">删除</a>
        </template>
      </el-table-column>
    </el-table>

    <div class="clear Pag">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
        :total="currentCount"
        @current-change="currentChange"
        class="page"
      >
      </el-pagination>
    </div>
    <DiaLog
      :dialogFormVisible.sync="dialogFormVisibleAdd"
      @save="saveAdd"
      :input="true"
      :date="true"
      :textarea="true"
      title="添加员工"
    ></DiaLog>
    <DiaLog
      :dialogFormVisible.sync="dialogFormVisibleEdit"
      @save="saveEdit"
      :input="true"
      :textarea="true"
      :form1.sync="editFormData"
      title="编辑员工"
    ></DiaLog>
    <!-- :input="true" :date="true" :textarea="true" -->
    <!-- <Dialog
      :dialogFormVisible.sync="dialogFormVisible"
      @save="edit"
      :input="true"
      :textarea="true"
    ></Dialog> -->

    <!-- <el-dialog
      title="编辑部门"
      :visible.sync="dialogFormVisible1"
      class="edit-dialog"
    >
      <el-form :model="form" ref="form" :rules="rules" class="bumen-edit-from">
        <el-form-item
          label="部门名称"
          prop="name"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item
          label="部门描述"
          prop="description"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.description" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit(form)">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import DiaLog from "@/components/shaixuan/DiaLog.vue";
import {
  bumenApi,
  delbumenApi,
  addbumenApi,
  currentCountApi,
  editbumenApi,
  isUsedStateApi,
} from "@/http/systemApi/bumenApi";
export default {
  data() {
    // let Name = (rule, value, callback) => {
    //   if (/^[\u2E80-\u9FFF]+$/.test(value)) {
    //     return callback();
    //   }
    //   callback(new Error("只能输入汉字"));
    // };
    // let shu = (rule, value, callback) => {
    //   if (/^[\u2E80-\u9FFF]+$/.test(value)) {
    //     return callback();
    //   }
    //   callback(new Error("只能输入汉字"));
    // };
    return {
      count: "",
      fangshi: "",
      icon: true,
      title: "",
      currentPage: 1,
      currentCount: 0,
      pageSize: 10,
      dialogFormVisibleAdd: false,
      dialogFormVisibleEdit: false,
      formLabelWidth: "120px",
      tableData: [],
      editFormData: {
        name: "",
        description: "",
        createTime:"",
      },
      publicId: "",
    };
  },
  components: {
    DiaLog,
  },
  created() {
    this.getItem(this.currentPage);
  },
  computed: {
    geteditFormData() {
      return this.editFormData;
    },
  },
  methods: {
    //添加
    saveAdd(form, callback) {
      this.dialogFormVisibleAdd = false;
      console.log(form);
      addbumenApi(form)
        .then((res) => {
          console.log("添加成功", res);
          callback();
          this.getItem(this.currentPage);
        })
        .catch((err) => {
          console.log("添加失败", err);
        });
    },
    //删除
    bumenDelete(id) {
      this.$confirm("你确定要永久删除这条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id);
          delbumenApi(id).then((res) => {
            console.log(res);
            this.getItem(this.currentPage);
          });

          this.$message({
            type: "success",
            message: "删除成功",
          });
          // this.getItem(this.currentPage);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取
    getItem(page) {
      //获取数据
      bumenApi(page)
        .then((res) => {
          console.log("获取成功:",res)
          this.tableData = res.data.data;
        })
        .catch((err) => {
          console.log("获取错误:", err);
        });
      // 获取总条数
      currentCountApi()
        .then((res) => {
          console.log(res);
          this.currentCount = res.data.data;
        })
        .catch((err) => {
          console.log("获取错误:", err);
        });
    },
    //分页
    currentChange(currentPage) {
      console.log("当前页", currentPage);
      this.currentPage = currentPage;
      this.getItem(this.currentPage);
    },

    //改变状态
    Switch(row) {
      console.log("改变的id:", row.id);
      isUsedStateApi(row.id,row.isUsed)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log("失败:", err);
        });
    },

    //编辑
    edit(row) {
      this.dialogFormVisibleEdit = true;
      this.editFormData.name = row.name;
      this.editFormData.description = row.description;
      this.editFormData.createTime=row.createTime;
      this.publicId = row.id;
    },
    saveEdit(form, callback) {
      this.dialogFormVisibleEdit = false;
      editbumenApi({
        id: this.publicId,
        name: form.name,
        description: form.description,
        createTime:form.createTime,
      })
        .then((res) => {
          console.log("编辑成功", res);

          this.getItem(this.currentPage);
          callback();
        })
        .catch((err) => {
          console.log("编辑错误", err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.bumen {
  & .bumen-hearder {
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
    background-color: rgb(232, 232, 232);
    box-sizing: border-box;
  }

  & .bumen-left {
    float: left;
  }
  & .bumen-right {
    float: right;
  }
  & .Pag {
    height: 50px;
    padding-top: 20px;
    border: 1px solid rgb(224, 224, 224);
  }
  & .page {
    float: right;
  }
  & a {
    margin-right: 15px;
    color: rgb(61, 222, 120);
    cursor: pointer;
  }
  // & .edit-dialog {
  //   width: 600px;
  //   position: absolute;
  //   left: 32%;
  //   top: 10%;
  // }
  // & ::v-deep .el-dialog {
  //   width: 100%;
  //   margin: 0;
  // }
  // & ::v-deep .el-dialog__header {
  //   background-color: rgb(232, 232, 232);
  // }
  // & .bumen-edit-from {
  //   width: 400px;
  //   margin: 0 auto;
  // }

  ::v-deep .el-dialog__wrapper {
    overflow: visible;
  }
}
</style>